<template>
  <view class="confirm-order">
    <view class="uni-column">
      <view class="item-content">
        <view class="box-left-icon">
          <text class="iconfont icon-wode1 icon1"></text>
        </view>
        <view class="title item-content-title">姓名：</view>
        <view class="item-content-input">
          <input
            class="uni-input"
            name="phone"
            v-model="name"
            placeholder="输入电话"
          />
        </view>
      </view>
      <view class="item-content">
        <view class="box-left-icon">
          <text class="iconfont icon-weibiaoti- icon1"></text>
        </view>
        <view class="title item-content-title">电话：</view>
        <view class="item-content-input">
          <input
            class="uni-input"
            name="phone"
            v-model="phone"
            placeholder="输入电话"
          />
        </view>
      </view>
      <view class="item-content" id="address">
        <view class="box-left-icon">
          <text class="iconfont icon-shangdian icon1"></text>
        </view>
        <view class="title item-content-title">自提点：</view>
        <view class="item-content-input">
          <div class="uni-input">{{ address }}</div>
        </view>
      </view>
    </view>
    <div class="goods-wrapper">
      <div class="sort-item-content">
        <div
          class="content-item"
          v-for="(item, index) in choseData"
          :key="index"
        >
          <div class="img-wrapper">
            <img class="img" :src="item.img" />
          </div>
          <div class="content-wrapper">
            <div class="title">{{ item.title }}</div>
            <div class="cart-bottom">
              <div class="cart-money">
                <div class="money">
                  <text class="iconfont icon-jiage"></text>{{ item.price }}
                </div>
              </div>
              <div class="cart">
                <div>
                  <div class="btn1" @click="reduce(item, index)">数量:</div>
                </div>
                <div class="num">
                  <div>{{ item.num }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-foot">
      <div class="foot-pay" @click="toPay">
        <div class="money">
          <text class="iconfont icon-jiage"></text>{{ allPrice }}
        </div>
        <div>立即支付</div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      openid: "",
      name: "",
      phone: "",
      address: "幸福小区天天惠超市",
      choseData: [
        {
          id: 1,
          img: "http://localhost:3000/161875181886913578870ab610c5.jpg",
          author: 1,
          title:
            "飘柔洗发水套装500ml*3滋润去屑男士女士通用花香调,飘柔洗发水套装500ml*3滋润去屑(男士女士通用)花香调",
          sort: "经典之作",
          fileName: "classicWorks|sanGuo",
          num: 5,
        },
        {
          id: 2,
          img:
            "http://localhost:3000/1618751818854908fa0ec08fa513dfd281107336d55fbb3fbd96d.jpg",
          author: 2,
          title:
            "飘柔洗发水套装500ml*3滋润去屑男士女士通用花香调,飘柔洗发水套装500ml*3滋润去屑(男士女士通用)花香调",
          sort: "经典之作",
          fileName: "classicWorks|sanGuo",
          num: 10,
        },
        {
          id: 3,
          img:
            "https://img12.360buyimg.com/n1/jfs/t1/140716/6/14212/152277/5faccda7Ee80ce57b/97dcbe262dd41fef.jpg",
          author: 3,
          title:
            "飘柔洗发水套装500ml*3滋润去屑男士女士通用花香调,飘柔洗发水套装500ml*3滋润去屑(男士女士通用)花香调",
          sort: "经典之作",
          fileName: "classicWorks|sanGuo",
        },
        {
          id: 4,
          img:
            "https://img12.360buyimg.com/n1/jfs/t24718/142/1801401224/452184/39730568/5bbc0176N26b6eba6.jpg",
          author: 4,
          title:
            "飘柔洗发水套装500ml*3滋润去屑男士女士通用花香调,飘柔洗发水套装500ml*3滋润去屑(男士女士通用)花香调",
          sort: "经典之作",
          fileName: "classicWorks|sanGuo",
        },
      ],
      allPrice: 0,
    };
  },
  onLoad(option) {
    this.choseData = JSON.parse(decodeURIComponent(option.choseData));
    // console.log(this.choseData);
    this.getPrice();
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "openid",
      success: function (res) {
        // console.log(res);
        that.openid = res.data;
        that
          .$MyRequest({
            url: "/get_all_people",
            method: "POST",
            data: {
              openid: that.openid,
            },
          })
          .then((res) => {
            that.name = res.data.data[0].name;
            that.phone = res.data.data[0].phone;
          });
      },
    });
  },
  methods: {
    toPay() {
      let that = this;
      let phoneReg = /^1\d{10}$/;
      console.log(this.phone);
      console.log(this.name);
      if (!phoneReg.test(this.phone)) {
        uni.showToast({
          title: "请输入正确电话号码",
          icon: "none",
          duration: 1500,
        });
        return false;
      }
      if (this.name.length < 2) {
        uni.showToast({
          title: "请输入正确姓名",
          icon: "none",
          duration: 1500,
        });
        return false;
      }
      uni.showModal({
        title: "请确认是否支付？",
        content: that.allPrice + "元",
        cancelText: "取消",
        confirmText: "确定支付",
        cancelColor: "#999",
        confirmColor: "#E92828",
        success(res) {
          if (res.confirm) {
            console.log(that.choseData);
            console.log(that.allPrice);
            that
              .$MyRequest({
                url: "/cart_order",
                method: "POST",
                data: {
                  openid: that.openid,
                  orderData: JSON.stringify(that.choseData),
                  money: that.allPrice,
                  phone: that.phone,
                  address: that.address,
                  name: that.name,
                },
              })
              .then((res) => {
                console.log(res);
                uni.redirectTo({
                  url: "/pages/home/service/GroupBuying/PaySucess",
                });
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    getPrice() {
      this.allPrice = 0;
      for (let i in this.choseData) {
        this.allPrice += this.choseData[i].num * this.choseData[i].price;
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.confirm-order {
  width: 100%;
  height: 100vh;
  background-color: $uni-color-indexBg;
  // padding
  .uni-column {
    .item-content {
      color: #000000;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e7e7e7;
      .title {
        font-size: 30rpx;
        padding: 20rpx 0;
      }
      .icon1 {
        color: rgb(158, 156, 156);
        padding-right: 18rpx;
      }
      .item-content-input {
        // position: absolute;
        padding-left: 20rpx;
        .uni-input {
          // padding-left: 40rpx;
          font-size: 30rpx;
          color: #666;
        }
      }
    }
    #address {
      border: none;
    }
  }
  .goods-wrapper {
    margin-top: 25rpx;
    .sort-item-content {
      padding: 0 15rpx;
      padding-top: 15rpx;
      padding-bottom: 10rpx;
      background-color: #fff;
      margin-bottom: 90rpx;
      width: 100%;

      box-sizing: border-box;

      .content-item {
        display: flex;
        margin-bottom: 30rpx;
        border-bottom: 1rpx solid rgba(223, 222, 222, 0.746);
        // padding-bottom: 10px;

        .img-wrapper {
          // padding: 20rpx 20rpx 20rpx 0;
          box-sizing: border-box;
          flex: 0 0 28%;
          // width: 250rpx;
          // height: 270rpx;
          .img {
            width: 100%;
            height: 180rpx;
          }
        }
        .content-wrapper {
          width: 100%;
          height: 180rpx;
          padding: 5rpx 0;
          padding-left: 18rpx;
          box-sizing: border-box;
          position: relative;

          padding-bottom: 10px;
          // padding-right: 15rpx;
          // right: 15rpx;
          .title {
            font-size: 24rpx;
            letter-spacing: 2rpx;
            color: black;
          }
          .author {
            margin-top: 20rpx;
          }
          .cart-bottom {
            position: absolute;
            bottom: 5px;
            display: flex;
            .cart-money {
              .money {
                color: #000;
                font-size: 30rpx;
                font-weight: bold;
                // @include center;
              }
            }
            .cart {
              // padding-left: 120rpx;
              // box-sizing: border-box;
              position: absolute;
              left: 290rpx;
              bottom: 0;
              font-size: 30rpx;
              box-sizing: border-box;
              display: flex;
              color: rgb(163, 163, 163);
              .num {
                width: 68rpx;
              }
              .btn1 {
                font-size: 30rpx;

                width: 90rpx;
              }
            }
          }
        }
      }
    }
  }
  .home-foot {
    width: 100%;
    // height: 70px;
    position: fixed;
    z-index: 500;
    bottom: 0;
    display: flex;
    // align-items: center;
    height: 90rpx;
    background-color: #fff;
    border-top: 1px solid rgb(233, 231, 231);
    .foot-ding {
      @include center;
      text-align: center;
      // vertical-align: middle;
      flex: 0 0 120rpx;
      background-color: #fff;
      font-size: 27rpx;
    }
    .foot-cart {
      @include center;
      font-size: 27rpx;
      text-align: center;
      flex: 0 0 120rpx;
      background-color: #fff;
    }

    .foot-pay {
      text-align: center;
      flex: 1;
      background-color: $uni-color-cart;
      color: #fff;
    }
    .icon {
      font-size: 37rpx;
    }
  }
}
</style>
